<template>
	<view class="rank-page">
		<z-header>排行</z-header>
		<view
			class="authors-swiper"
			@touchstart="onTouchStart"
			@touchend="onTouchEnd"
			:style="{left:swiperLeft+'px'}">
			<view class="avatar-item" v-for="(v,i) in authors" :key="i" :data-active="i===currentAvatar">
				<avatar class="avatar" :src="v.avatarUrl" :name="v.name" circle></avatar>
			</view>
		</view>
		<view class="h1">{{authors[currentAvatar].name}}</view>
		<view class="p1">{{authors[currentAvatar].focus}} 关注者</view>
		<view class="focus-btn web-font-thin" :data-focused="authors[currentAvatar].focused" @click="focusHandle">
			{{authors[currentAvatar].focused ? '已关注' : '关注'}}
		</view>
		<playlist :items="list"></playlist>
		<loading-modal v-model="showLoading"></loading-modal>
	</view>
</template>

<script>
	import playlist from '@/pages/play/playlist'
	export default {
		components:{playlist},
		data() {
			return {
				showLoading: false,
				currentAvatar: 2,
				authors: [
					{name:'Mark Robertson', focused:false, focus: '20,988', _id:1, avatarUrl:'/static/avatar1.jpg'},
					{name:'Mark Robertson2', focused:true, focus: '20,978', _id:2, avatarUrl:'/static/avatar2.jpg'},
					{name:'Mark Robertson3', focused:false, focus: '208', _id:3, avatarUrl:'/static/avatar3.jpg'},
					{name:'Mark Robertson4', focused:false, focus: '2,098', _id:4, avatarUrl:'/static/avatar1.jpg'},
					{name:'Mark Robertson5', focused:true, focus: '2,088', _id:5, avatarUrl:'/static/avatar2.jpg'},
					{name:'Mark Robertson6', focused:false, focus: '209', _id:6, avatarUrl:'/static/avatar3.jpg'},
				],
				startX: 0,
				swiperLeft: 0,
				list: [
					{_id:'1', name:'Concerning Hobbits', previewImg:'/static/play/item-bg-1.jpg', avatarUrl:'/static/avatar1.jpg', likeCount:'22, 033', liked: false, author: 'author1', audio:'/static/temp/Concerning Hobbits.mp3', duration:'00:20:23'},
					{_id:'2', name:'如何做自我清理',previewImg:'/static/play/item-bg-2.jpg', avatarUrl:'/static/avatar2.jpg', likeCount:'22, 033', liked: true, author: 'author1', audio:'/static/temp/Concerning Hobbits.mp3', duration:'00:12:23'},
					{_id:'3', name:'Firestone2 Concerning Hobbits',previewImg:'/static/play/item-bg-3.jpg', avatarUrl:'/static/avatar3.jpg', likeCount:'22, 033', liked: true, author: 'author1', audio:'/static/temp/Concerning Hobbits.mp3', duration:'00:32:43'},
					{_id:'4', name:'Firestone3',previewImg:'/static/play/item-bg-1.jpg', avatarUrl:'/static/avatar1.jpg', likeCount:'22, 033', liked: true, author: 'author1', audio:'/static/temp/Concerning Hobbits.mp3', duration:'00:05:09'},
					{_id:'5', name:'Firestone4',previewImg:'/static/play/item-bg-2.jpg', avatarUrl:'/static/avatar2.jpg', likeCount:'22, 033', liked: true, author: 'author1', audio:'/static/temp/Concerning Hobbits.mp3', duration:'01:00:23'},
					{_id:'6', name:'Firestone5',previewImg:'/static/play/item-bg-3.jpg', avatarUrl:'/static/avatar3.jpg', likeCount:'22, 033', liked: true, author: 'author1', audio:'/static/temp/Concerning Hobbits.mp3', duration:'00:45:07'}
				]
			}
		},
		methods: {
			onTouchStart(e){
				this.startX = e.changedTouches[0].clientX
			},
			onTouchEnd(e){
				var shiftHandle = ()=>{
					this.showLoading = true
					setTimeout(()=>{
						this.showLoading = false
						this.list.push(...this.list.splice(0,1))
					}, 1000)
				}
				var endX = e.changedTouches[0].clientX
				if(this.startX - endX > 20){
					if(this.currentAvatar===this.authors.length-1)return false
					this.currentAvatar++
					this.swiperLeft -= 65
					shiftHandle()
				}else if(endX - this.startX > 20){
					if(this.currentAvatar===0)return false
					this.currentAvatar--
					this.swiperLeft += 65
					shiftHandle()
				}
			},
			focusHandle(e){
				var item = this.authors[this.currentAvatar]
				// 存储时间戳避免连续点击发起频繁请求
				if(item.lastTime === undefined || e.timeStamp - item.lastTime > 500){
					item.focused = !item.focused
					item.lastTime = e.timeStamp
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
.rank-page{
	width: 100%;
	overflow-x: hidden;
}
.authors-swiper{
	display: flex;
	align-items: center;
	padding: 50upx 16upx 40upx;
	position: relative;
	transition: left .3s;
	[data-active="true"]{
		opacity: 1;
		margin: 0 30upx;
		.avatar{
			font-size: 46upx;
			box-shadow: 0 0 0 10upx rgba(255,255,255,0.15);
		}
	}
}
.avatar-item{
	margin: 0 20upx;
	opacity: .5;
	&:first-of-type{
		
	}
}
.rank-page{
	.h1, .p1{
		text-align: center;
	}
	.h1{
		font-size: $font-size-lg + 8upx;
		letter-spacing: 2upx;
	}
	.p1{
		font-size: $font-size-sm;
		opacity: .5;
		margin: 10upx 0;
	}
	.focus-btn{
		width: 180upx;
		height: 2.5em;
		border: solid 1upx rgba(255,255,255,.8);
		border-radius: 6upx;
		font-size: $font-size-md;
		display: flex;
		align-items: center;
		justify-content: center;
		margin: 20upx auto 40upx;
		&:active{
			opacity: .8;
		}
	}
}
</style>
